<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex-shrink demo</title>
    <style>
        .box {
            display: flex;
            width: 400px;
            outline: 1px red solid;
        }

        .item1 {
            flex: 0 2 300px;
            background-color: #32d6d6;
        }

        .item2 {
            flex: 0 1 200px;
            background-color: #e2a83e;
        }

        .item3 {
            flex: 0 2 100px;
            background-color: #b85ad0;
        }

        .item-2-1 {
            flex: 1 1;
            padding: 50px;
            background-color: #32d6d6;
            background-clip: content-box;
        }
        .item-2-2 {
            flex: 1 1;
            padding: 20px;
            background-color: #b85ad0;
            background-clip: content-box;
        }

        .demo-3 {
            flex: 1 1;
            display: flex;
            align-items: center;
        }
        .demo-3-1 {
            flex: 1 1;
            padding: 50px;
            background-color: #32d6d6;
            background-clip: content-box;
        }
        .demo-3-2 {
            flex: 1 1;
            padding: 20px;
            background-color: #b85ad0;
            background-clip: content-box;
        }

        .item-border-box {
            flex-basis: 100%;
            box-sizing: border-box;
        }

        .flexBox {
            display: flex;
            width: 1500px;
            outline: 1px red solid;
        }
        .flexItem-1, .flexItem-2, .flexItem-3 {
            flex-shrink: 2;
            flex-basis: 300px;
        }
        .flexItem-1 {
            margin: 0 10px;
        }
        .flexItem-2 {
            padding: 0 20px;
            border: 5px #ccc solid;
            box-sizing: content-box;
        }
        .flexItem-3 {
            padding: 0 20px;
            border: 5px #ccc solid;
            box-sizing: border-box;
        }
        .flexItem-4, .flexItem-5, .flexItem-6 {
            flex-shrink: 1;
            flex-basis: 200px;
        }
        .flexItem-4 {
            padding: 0 10px;
        }
        .flexItem-5 {
            border: 5px #ccc solid;
            margin: 0 10px;
            box-sizing: content-box;
        }
        .flexItem-6 {
            border: 5px #ccc solid;
            margin: 0 10px;
            box-sizing: border-box;
        }
        .flexItem-7, .flexItem-8, .flexItem-9 {
            flex-shrink: 2;
            flex-basis: 100px;
        }
        .flexItem-7 {
            border: 5px #ccc solid;
        }
        .flexItem-8 {
            padding: 0 30px;
            margin: 0 10px;
            box-sizing: content-box;
        }
        .flexItem-9 {
            padding: 0 30px;
            margin: 0 10px;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
<div class="box">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div class="item3">3</div>
</div>
<br />

<div class="box">
    <div class="item-2-1">1</div>
    <div class="item-2-2">2</div>
</div>
<br />

<div class="box">
    <div class="demo-3">
        <div class="demo-3-1">
            1
        </div>
    </div>
    <div class="demo-3">
        <div class="demo-3-2">
            2
        </div>
    </div>
</div>
<br />

<div class="box">
    <div class="item-2-1 item-border-box">1</div>
    <div class="item-2-2 item-border-box">2</div>
</div>
<br />

<div class="flexBox">
    <div class="flexItem-1" title="300 - (550*600/2770) ≈ 180.866">1</div>
    <div class="flexItem-2" title="300 - (550*600/2770) ≈ 180.866">2</div>
    <div class="flexItem-3" title="300 - (550*500/2770) ≈ 200.722 - 20*2 - 10*2 = 150.722">3</div>
    <div class="flexItem-4" title="200 - (550*200/2770) ≈ 160.288">4</div>
    <div class="flexItem-5" title="200 - (550*200/2770) ≈ 160.288">5</div>
    <div class="flexItem-6" title="200 - (550*190/2770) ≈ 162.274 - 5*2 = 152.274">6</div>
    <div class="flexItem-7" title="100 - (550*200/2770) ≈ 60.288">7</div>
    <div class="flexItem-8" title="100 - (550*200/2770) ≈ 60.288">8</div>
    <div class="flexItem-9" title="100 - (550*80/2770) ≈ 84.115 - 30*2 = 24.115">9</div>
</div>
<!--
flex_container_available_length = 1500
flex_items_length = (300+10*2) + (300+20*2+5*2) + (300) + (200+10*2) + (200+10*2+5*2) + (200+10*2) + (100+5*2) + (100+10*2+30*2) + (100+10*2)
                  = 2050
shrink_factor = 2770
    300*2  600
    300*2  600
    (300-20*2-5*2)*2  500

    200*1 200
    200*1 200
    (200-5*2)*1 190

    100*2  200
    100*2  200
    (100-30*2)*2  80

will_allocate_length = 1500 - 2050 = -550

flex_item_width
    300 - (550*600/2770) = 180.866
    300 - (550*600/2770) = 180.866
    300 - (550*500/2770) = 200.722 - 20*2 - 10*2 = 150.722

    200 - (550*200/2770) = 160.288
    200 - (550*200/2770) = 160.288
    200 - (550*190/2770) = 162.274 - 5*2 = 152.274

    100 - (550*200/2770) = 60.288
    100 - (550*200/2770) = 60.288
    100 - (550*80/2770) = 84.115 - 30*2 = 24.115
-->
</body>

</html>